<template>
  <div>
    <div class="c1" style="padding: 20px">
      <!-- {{id}} -->
      <el-row class="fl white" style="margin-left: 60px; font-size: 18px">
        服 务 日 志
      </el-row>
      <el-row>
        <img src="@/assets/border.png" class="fl" style="margin-top: -5px" />
      </el-row>

      <el-row class="mt25">
        <el-form :inline="true" :model="form" size="small">
          <el-form-item>
            <el-date-picker
              v-model="form.start_time"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="开始日期"
              style="width: 200px"
            >
            </el-date-picker>
            <span class="ml10 mr10" style="color: #fff">至</span>
            <el-date-picker
              v-model="form.end_time"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="结束日期"
              style="width: 200px"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="form.log_title"
              placeholder="日志标题"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item >
		    <el-input v-model="form.status" placeholder="处理状态"></el-input>
		</el-form-item> -->
          <el-form-item>
            <el-select
              v-model="form.work_status"
              placeholder="工作类别"
              style="width: 200px"
            >
              <el-option
                v-for="(item, index) in status_select_label"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="gridid == ''">
            <el-cascader
              style="width: 200px"
              filterable
              :options="treedata"
              :props="props1"
              filterable
              change-on-select
              v-model="selectedOptions"
            >
            </el-cascader>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="search"
              style="width: 140px; background: rgba(10, 137, 145, 1)"
              >查 询</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
    </div>

    <div class="c2" style="padding: 20px">
      <el-row>
        <el-table :data="list.results" :header-cell-style="{'background-color': '#169098', color: '#fff'}"
        border height="680" style="background: #083749" :row-style="{height: '63px'}">
					<el-table-column
						prop="log_title"
						label="日志标题"
						align="center"
						show-overflow-tooltip
					>
					</el-table-column>
					<el-table-column
						prop="work_status_name"
						label="工作类型"
						align="center"
						width="100"
					>
					</el-table-column>
					</el-table-column>
					<el-table-column prop="grid_names" label="所属网格" align="center">
					</el-table-column>
					<el-table-column prop="release_name" label="创建人" align="center">
					</el-table-column>
					<el-table-column width="50" align="center" label="操作">
						<template v-if="scope.row.id" slot-scope="scope">
							<el-button
								type="success"
								size="mini"
								icon="el-icon-view"
								circle
								@click="playback(scope.row)"
							>
							</el-button>
						</template>
					</el-table-column>
        </el-table>
      </el-row>

      <el-row class="text-center mt20 mb20">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="list.totalRecord"
        >
        </el-pagination>
      </el-row>

      <el-dialog
        :title="currentEvent.info.question_title"
        :visible.sync="eventDialogVisible"
        append-to-body
        width="80%"
      >
        <eventinfo :obj="currentEvent"></eventinfo>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import daterange from "@/components/daterange";

import eventinfo from "@/views/event/info";
import flowinfo from "@/views/event/flow";

export default {
  name: "question",

  data() {
    return {
      s_e: [this.$util.date2str(new Date()), this.$util.date2str(new Date())],

      //treedata : [],

      form: {
        start_time: this.$util.date2str(new Date()),
        end_time: this.$util.date2str(new Date()),
      },

      props1: {
        value: "id",
        label: "name",
      },

      selectedOptions: ["88888"],

      list: {},

      pageNo: 1,
      pageSize: 10,

      status_label: ["", "处理中", "已完成"],

      status_select_label: [
        { label: "全部", value: undefined },
      ],

      eventDialogVisible: false,

      currentEvent: {
        info: {
          title: "",
        },
      },

      activeName2: "first",
    };
  },

  props: {
    treedata: {
      type: Array,
      default() {
        return [];
      },
    },

    gridid: {
      type: String,
      default: "",
    },
  },

  components: {
    daterange,
    eventinfo,
    flowinfo,
  },

  computed: {
    id() {
      this.init();
      return "";
    },
  },

  methods: {
    init() {
      const day = this.$util.dateDiff(this.form.start_time, this.form.end_time);
      if (day < 0) {
        this.$message.warning("开始时间不能在结束时间之后。");
        return;
			}

      let para = {
        fun: "eventList",
        start_time: this.form.start_time + " 00:00:00",
        end_time: this.form.end_time + " 23:59:59",
				//...this.form,
				// id: this.form.id,
        log_title: this.form.log_title,
				work_status: this.form.work_status,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        cb: (res) => {
          this.list = this.$util.tableAdd(res);
          this.$emit("getpointList", {
            ...res,
            what: "question"
          });
        },
      };
      if (this.gridid == "") {
        para["grid_id"] = this.selectedOptions[this.selectedOptions.length - 1];
      } else {
        para["grid_id"] = this.gridid;
      }
      this.$http(para);
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.init();
    },

    handleCurrentChange(val) {
      this.pageNo = val;
      this.init();
    },

    search() {
      this.pageNo = 1;
      this.init();
    },
		// 给父级传值
    playback(item) {
      this.$emit("getpoint", {
        ...item,
        what: "question",
        lon: item.event_longitude,
        lat: item.event_latitude,
      });
    },

    info(item) {
      console.log("info");

      console.log(item);
      this.$http({
        fun: "eventInfo",
        id: item.id,
        cb: (res) => {
          this.$http({
            fun: "flowList",
            id: item.id,
            cb: (res1) => {
              console.log("ffffffff");
              console.log(res);
              console.log(res1);

              res1.forEach((item) => {
                if (item.params == undefined || item.params == "") {
                  item["paramsobj"] = {
                    content: "",
                  };
                } else {
                  item["paramsobj"] = JSON.parse(item.params);
                }
              });

              this.currentEvent = {
                info: {
                  ...res,
                  imgs: res.question_img ? res.question_img.split(",") : [],
                  videos: res.question_video
                    ? res.question_video.split(",")
                    : [],
                },
                flow: res1,
              };
              console.log(this.currentEvent);
              this.activeName2 = "first";
              this.eventDialogVisible = true;
            },
          });
        },
      });
		},
		initWorkList () {
			let data = {
				type: 'work_status'
			}
			this.$http({
        fun: "getDictItems",
        //requestType : 'get',
        ...data,
        cb: (res) => {
					// console.log('全部： ', this.$util.tableAdd(res))
					this.status_select_label = this.$util.tableAdd(res);
					this.status_select_label.unshift({ label: "全部工作类型", value: undefined })
        },
      });
		},
  },

  watch: {},

  mounted() {
		this.init();
		this.initWorkList();
  },
};
</script>

<style scoped>
.c1 {
  width: 452px;
  height: 180px;
  background: rgba(8, 55, 73, 0.95);
}

.c2 {
  width: 452px;
  height: 646px;
  background-color: #083749;
  opacity: 0.95;
}
</style>
